<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Quota Internals</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="chrome://resources/css/roboto.css">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="quota_internals.css">
  <script type="module" src="quota_internals.js" defer></script>
</head>
  <body>
    <cr-tab-box>
        <div id="summary-tab" slot="tab">Summary</div>
        <div id="usage-tab" slot="tab">Usage &amp; Quota</div>
        <div id="summary-tabpanel" slot="panel">
          <!-- Summary -->
          <h2>Summary</h2>
          <h3>Disk Availability</h3>
          <table class="disk-availability-table">
            <thead>
              <th>Total Space</th>
              <th>Available Space</th>
              <th>Temporary Storage Usage</th>
              <th>Syncable Storage Usage</th>
              <th>Temp Pool Size</th>
            </thead>
            <tbody id="listeners-tbody"></tbody>
          </table>

          <h3>Eviction Statistics</h3>
          <table class="eviction-statistics-table">
            <thead class="eviction-statistics-header">
              <th>Errors on Getting Usage and Quota</th>
              <th>Evicted Buckets</th>
              <th>Eviction Rounds</th>
              <th>Skipped Eviction Rounds</th>
            </thead>
            <tbody id="eviction-tbody"></tbody>
          </table>

          <h2 class="test-storage-pressure-header">
            Test Storage Pressure Behavior</h2>
          <h3 id="simulate-storage-pressure-activation-message" hidden>
            Simulate storage pressure is deactivated in Incognito.</h3>
          <form>
            <label>Origin to test: </label>
            <input type="url" name="origin-to-test" id="origin-to-test"
                placeholder="https://example.com" pattern="https://.*"
                size="30" required>
            <button name="trigger-notification" id="trigger-notification"
                type="submit">
              Trigger Storage Pressure Notification
            </button>
          </form>
        </div>

        <div id="usage-tabpanel" slot="panel">
          <!-- Usage and Quota -->
          <h2>Bucket Usage Data</h2>
          <table>
            <thead>
              <th>Storage Key</th>
              <th>Storage Type</th>
              <th>Bucket</th>
              <th>Usage (B)</th>
              <th>Use Count</th>
              <th>Last Accessed</th>
              <th>Last Modified</th>
            </thead>
            <tbody id="usage-and-quota-tbody"></tbody>
          </table>
        </div>
    </cr-tab-box>

    <template id="listener-row">
      <tr>
        <td class="total-space"></td>
        <td class="available-space"></td>
        <td class="temporary-global-and-unlimited-usage"></td>
        <td class="syncable-global-and-unlimited-usage"></td>
        <td class="temp-pool-size"></td>
      </tr>
    </template>
    <template id="eviction-row">
      <tr class="eviction-tr">
        <td class="errors-on-getting-usage-and-quota"></td>
        <td class="evicted-buckets"></td>
        <td class="eviction-rounds"></td>
        <td class="skipped-eviction-rounds"></td>
      </tr>
    </template>
    <template id="usage-and-quota-row">
        <tr class="usage-and-quota-template-row">
          <td class="storage-key"></td>
          <td class="storage-type"></td>
          <td class="bucket"></td>
          <td class="usage"></td>
          <td class="use-count"></td>
          <td class="last-accessed"></td>
          <td class="last-modified"></td>
        </tr>
    </template>
  </body>
</html>
